// html, body {
//   height: calc(100% - 60px);
//   width: 100%;
// }
@import './var.scss';

// 用户卡片CSS
.user-card-body {
  .header {
    display: flex;
    align-items: center;
    .user-card-info {
      width: 144px;
      margin-left: 10px;
      .info-item-nickname {
        margin: 0;
      }
      .info-item-signature {
        margin: 3px 0;
      }
    }
  }
}

.basics-box-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.box-shadow1 {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.img-loading-tips {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  &::after {
    content: '资源加载中...';
    position: absolute;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/*element-ui dialog遮罩层问题*/
.v-modal {
  // z-index: 2000 !important;
  display: none !important;
}

// 全局布局CSS
html, body {
  height: 100%;
}
#app {
  height: 100%;
  // min-width: 1120px;
  // width: 1020px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

input {
  &::placeholder {
    @extend .secondary-font
  }
}

* {
  box-sizing: border-box;
}

.tips {
  font-size: 12px;
  color: $primarycolor-1;
  margin-bottom: 5px;
  &::before {
    margin-right: 5px;
  }
}

.entry-link {
  text-decoration: none;
  color: inherit;
}

.aside-menu-link {
  text-decoration: none;
  color: $color-grey8;
  &:hover {
    color: $color-blue;
  }
}

.curp {
  cursor: pointer;
}

.circle {
  border-radius: 50%;
}

.not-link {
  text-decoration: none;
  &:hover {
    text-decoration: underline
  }
}

// 文字类CSS样式
.primary-font {
  color: $primaryfont;
  font-size: 16px;
}

.secondary-font {
  color: $secondaryfont;
  font-size: 12px;
}

.normal-font {
  color: $normalfont;
  font-size: 14px;
}

.ellipsis{
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.bottom-line {
  border-bottom: 1px solid #E4E7ED;
}

// 背景颜色
.primary-bg {
  background-color: $primarybg;
}

.normal-bg {
  background-color: $normalbg;
}

.secondary-bg {
  background-color: $secondarybg;
}

.seat-bg {
  background-color: $seatbg;
}

// 布局、位置CSS
.hor-ver-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.all0 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.space-bw {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.space-ar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.p-l-t {
  position: absolute;
  left: 10px;
  top: 10px;
  @extend .curp
}

.p-r-t {
  position: absolute;
  right: 10px;
  top: 10px;
  @extend .curp
}

.cur-disable {
  cursor: not-allowed;
}

// 用户不在线时图片置灰
.offline {
  // color: $normalfont;
  &>img {
    opacity: .5;
  }
}

// 等级level样式
.level {
  display: inline-block;
  width: 23px;
  height: 11px;
  margin: 0 4px;
  background-image: url()
}
$offset: -28;
$level: (0, 1, 2, 3, 4, 5, 6, 7, 8);
@each $var in $level {
  .lv#{$var} {
    background-position: -23px ($offset + (-64 * $var) + px);
  }
}

// 文字类操作
.operation-text {
  &:hover {
    background-color: $color-grey2;
  }
  display: inline-block;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  color: $primarycolor;
  transition: all .5s ease-in;
}

.operation-text__danger {
  @extend .operation-text;
  color: $dangercolor;
}

/* input */
.normal-inp {
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
}
/* 美化滚动条 */
*::-webkit-scrollbar{
width:4px;
height:4px;
}
*::-webkit-scrollbar-track{
background: #e9ebee;
border-radius:2px;
}
*::-webkit-scrollbar-thumb{
background: #aaa;
border-radius:2px;
}
*::-webkit-scrollbar-thumb:hover{
background: #747474;
}
*::-webkit-scrollbar-corner{
background: #f6f6f6;
}
